<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{/common/header(title='精武堂')}"></head>
<title>注册新精武堂</title>
<body>
<p>
    <img src="image/logo.png" th:src="@{/images/logo.png}" alt="logo"/><br/>
    新精武英雄，谁与争锋！<br/>
    欢迎注册，快与天下豪杰一起切磋武艺吧。<br/>
<form action="#" method="post">
    昵称:(5-10位数字)<br/>
    <input type="text" id="loginUserName"/><br/>
    登陆账号:(5-10位数字)<br/>
    <input type="text" id="loginName"/><br/>
    登陆密码:(8-15位字符)<br/>
    <input type="password" id="loginPwd"/><br/>
    重复密码:(8-15位字符)<br/>
    <input type="password" id="loginPwdTwo"/><br/>
    <a href="javascript:void(0);" title="点击更换验证码">
        <img id="imgVerify" src="/userLogin/getVerify" alt="更换验证码" height="36" width="100%" onclick="getVerify();">
    </a>
    <a href="javascript:void(0);" onclick="getVerify();">换一张</a>
    <br/>
    填验证码:<br/>
    <input name="code" type="text" id="code"/><br/>
    <input type="button" class="button" id="btn" value="马上注册" onclick="regUser()"/><br/>
</form>
<br/>
<br/>
忘记密码？我要<a href="findpwd.jsp">修改</a><br/>
忘记密保？我要<a href="findans.jsp">修改</a><br/>

<br/>

<div th:replace="~{/common/footer::[id='nav-footer']}"></div>

<br/>
</p>
<script src="/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script>
    //获取验证码
    function getVerify() {
        $("#imgVerify").attr("src", "/userLogin/getVerify?" + Math.random())
    }

    /***
     *  js前端特殊字符处理
     * @param str 要处理的字符串
     * @returns {void | string}
     */

    function escapeHtmlEntities(str) {
        var escapes = {
            '\\': '\\',
            '"': '"',
            '/': '/',
            't': '\t',
            'n': '\n',
            'r': '\r',
            'f': '\f',
            'b': '\b',
            '<': '＜',
            '>': '＞'
        };
        return str.replace(/\\(?:u(.{4})|([^u]))/g, function (a, b, c) {
            return b ? String.fromCharCode(parseInt(b, 16)) : escapes[c];
        });
    }

    //注册
    function regUser() {
        var loginUserName = $("#loginUserName").val().trim();
        var loginName = $("#loginName").val().trim();
        var loginPwd = $("#loginPwd").val().trim();
        var loginPwdTwo = $("#loginPwdTwo").val().trim();
        var text = $("#code").val().trim()
        loginName = escapeHtmlEntities(loginName)
        loginPwd = escapeHtmlEntities(loginPwd)
        text = escapeHtmlEntities(text)
        if (loginName.length == 0 || loginPwd.length == 0 || text.length == 0 || loginUserName.length == 0) {
            alert("请填写完整！")
            return
        } else if (loginPwdTwo != loginPwd) {
            alert("两次密码不一致请检查！")
            return
        }
        var data = JSON.stringify({"inputStr": text})
        $.ajax({
            url: "/userLogin/checkVerify",
            data: data,
            contentType: "application/json",
            dataType: "json",
            type: "POST",
            success: function (re) {
                if (re) {
                    var data = JSON.stringify({
                        "loginName": loginName,
                        "loginPwd": loginPwd,
                        "loginUserName": loginUserName
                    })
                    $.ajax({
                        url: "/userLogin/toRegister",
                        data: data,
                        contentType: "application/json",
                        dataType: "json",
                        type: "POST",
                        success: function (re) {
                            alert(re.msg)
                            location.href = re.path
                        }
                    });
                } else {
                    alert("请输入正确的验证码！")
                    getVerify()
                }
            }
        });
    }
</script>
</body>
</html>